
<div class="layui-form">
    <div class="layui-inline" style="padding: 4px">
        <label class="layui-form-label">商品</label>
        <div class="layui-input-inline">
            <select id="orderlist_shop" lay-filter="orderlist_shop" lay-search="">
                <option value="">不筛选商品</option>
            </select>
        </div>
    </div>

    <div class="layui-inline" style="padding: 4px">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select id="orderlist_state" lay-filter="orderlist_state">
                <option value="">不筛选状态</option>
                <option value="0">待付款</option>
                <option value="1">成功</option>
                <option value="-1">过期</option>

            </select>
        </div>
    </div>

    <div class="layui-inline" style="padding: 4px">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-inline">
            <input type="text" id="qq" lay-verify="required" placeholder="不筛选联系方式" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline" style="padding: 4px">
        <button class="layui-btn" lay-filter="formDemo" onclick="sub()">搜索</button>
    </div>
</div>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">

    <a class="layui-btn  layui-btn-xs" lay-event="cxkm">查询卡密</a>
</script>


<script>
    var myTable,shops;

    function formatDate(now) {
        now = new Date(now*1000);
        return now.getFullYear()
            + "-" + (now.getMonth()>8?(now.getMonth()+1):"0"+(now.getMonth()+1))
            + "-" + (now.getDate()>9?now.getDate():"0"+now.getDate())
            + " " + (now.getHours()>9?now.getHours():"0"+now.getHours())
            + ":" + (now.getMinutes()>9?now.getMinutes():"0"+now.getMinutes())
            + ":" + (now.getSeconds()>9?now.getSeconds():"0"+now.getSeconds());

    }
    var type;
    layui.use(['form','table','laydate'], function(){
        var table = layui.table,form = layui.form;
        $.post("admin/getShop",function (data) {
            for (var i = 0;i<data.data.length;i++){
                $("#orderlist_shop").append('<option value="'+data.data[i].id+'">'+data.data[i].shopname+'</option>');
            }
            shops=data.data;
            layui.form.render();


            //第一个实例
            myTable = table.render({
                elem: '#demo'
                ,height: 'full-160'
                ,url: 'admin/getOrder'
                ,cellMinWidth:100
                ,cols: [[ //表头
                    {field: "id",title:"编号"},
                    {field: 'shopid', title: '商品名',templet: function(d){
                            for (var i = 0;i<shops.length;i++){
                                if (shops[i].id==d.shopid){
                                    return shops[i].shopname;
                                }
                            }
                            return "已删除商品";
                        }
                    },

                    {field: 'date', title: '时间',templet: function(d){

                            return formatDate(d.date);
                        }
                    },
                    {field: 'state', title: '状态',sort: true,templet: function(d){
                            if (d.state==0){
                                return "待付款";
                            }else if (d.state==1){
                                return "成功";
                            }else if (d.state==-1){
                                return "过期";
                            }
                        }
                    },
                    {field: 'qq', title: '联系方式'},
                    {field: 'num', title: '数量'},
                    {field: 'money', title: '订单金额'},
                    {title: '操作', align:'center', toolbar: '#barDemo'}
                ]]
                ,page:true
            });
        });




        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event;

            if(layEvent === 'cxkm'){
                layer.prompt({title: '查看卡密',value:data.cards,formType:2}, function(val, index){
                    layer.close(index);
                })
            }
        });

        form.on('select(orderlist_shop)', function(data){
            console.log(data.value); //得到被选中的值
            myTable.reload({
                where: {
                    shopid:$("#orderlist_shop").val(),
                    state:$("#orderlist_state").val(),
                    qq:$("#qq").val(),
                } ,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        form.on('select(orderlist_state)', function(data){
            console.log(data.value); //得到被选中的值
            myTable.reload({
                where: {
                    shopid:$("#orderlist_shop").val(),
                    state:$("#orderlist_state").val(),
                    qq:$("#qq").val(),
                } ,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });


        form.render();

    });

    function sub() {
        myTable.reload({
            where: {
                shopid:$("#orderlist_shop").val(),
                state:$("#orderlist_state").val(),
                qq:$("#qq").val(),
            } ,
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

</script>
